<template>
  <div style="padding: 16px">
    <div style="border: 1px solid #e5e7eb; padding: 20px; background-color: #fff">
      <el-descriptions :column="3" :border="true">
        <el-descriptions-item label="请假人名称">{{ data.desData.userName }}</el-descriptions-item>
        <el-descriptions-item label="请假人部门">{{ data.desData.deptName }}</el-descriptions-item>
        <el-descriptions-item label="请假原因">{{ data.desData.reason }}</el-descriptions-item>
        <el-descriptions-item label="请假人开始时间">{{
          useRender.renderDate(data.desData.startTime)
        }}</el-descriptions-item>
        <el-descriptions-item label="请假人结束时间">{{
          useRender.renderDate(data.desData.endTime)
        }}</el-descriptions-item>
        <el-descriptions-item label="调休时间">{{
          useRender.renderDate(data.desData.leaveDay)
        }}</el-descriptions-item>
        <el-descriptions-item label="请假天数">{{ data.desData.days }}</el-descriptions-item>
        <el-descriptions-item label="工作承接人">{{
          data.desData.otherUserName
        }}</el-descriptions-item>
        <el-descriptions-item label="工作内容">{{ data.desData.workContent }}</el-descriptions-item>
        <el-descriptions-item label="附件"
          ><FileOutlined style="cursor: pointer" @click="openFile"
        /></el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { useRender } from '/@/components/Table';
  import { getleave } from '/@/api/backs/workFlow/leave';
  import { propTypes } from '/@/utils/propTypes';
  import { useRoute } from 'vue-router';
  import { FileOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    id: propTypes.number.def(undefined),
  });
  const data = reactive({
    desData: {},
  });
  const { params } = useRoute();
  getleave({ id: props.id || params.id }).then((res) => {
    data.desData = res;
  });
  const openFile = () => {
    window.location.href = data.desData.leaveUrl
  }
</script>
